<template>
  <div class="box_a">
    <div class="v_item">
      <BarTemplate
        :series-data="leftSeriesData"
        :colors="leftColors"
        :radius="leftRadius"
        :center="leftCenter"
        :title="leftTitle"
        :fontSize="18"
        :lineLength="36"
        :labelFontSize="17"
      />
    </div>
    <div class="v_item">
      <BarTemplate
        :series-data="rightSeriesData"
        :colors="rightColors"
        :radius="rightRadius"
        :center="rightCenter"
        :title="rightTitle"
        :fontSize="18"
        :lineLength="35"
        :labelFontSize="17"
      />
    </div>
  </div>
</template>

<script>
import BarTemplate from '@/components/barTemplate/barEchart.vue'
export default {
  components: { BarTemplate },
  name: 'BoxRightA',
  data() {
    return {
      leftSeriesData: [
        { name: '需交货', value: 38 },
        { name: '不良退回', value: 3 },
        { name: '已交货', value: 59 }
      ],
      leftColors: ['#36b67f', '#fa4d4c', '#faac15'],
      leftRadius: ['75%', '50%'],
      leftCenter: ['50%', '45%'],
      leftTitle: {
        text: '本月交货',
        textStyle: {
          color: '#fff',
          fontSize: 24
        },
        padding: 0,
        bottom: -3,
        left: 'center'
      },
      rightSeriesData: [
        { name: '延期', value: 8 },
        { name: '正常交货', value: 92 }
      ],
      rightColors: ['#fa4d4c', '#36b67f'],
      rightRadius: ['75%', '50%'],
      rightCenter: ['50%', '45%'],
      rightTitle: {
        text: '延期未交',
        textStyle: {
          color: '#fff',
          fontSize: 24
        },
        padding: 0,
        bottom: -3,
        left: 'center'
      }
    }
  }
}
</script>
<style scoped>
.box_a {
  height: 240px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box_a .v_item {
  width: 50%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding-left: 2px;
}
</style>
